<template>
  <section class="todoapp">
    <!-- 头部部分 -->
     <TodoListHeader @addList ="addList"></TodoListHeader>
     

    <!-- 主体部分 -->
    <TodoListBody :list= "renderList" @changeFlag="changeFlag" @delList="delList" @changeAll="changeAll"></TodoListBody>
  

    <!-- 底部部分 -->
    <TodoListFooter :sum= "sum" :delClearBtn="delClearBtn" :type ="type" @delAll="delAll"  @changeType="changeType"></TodoListFooter>
  </section>
</template>

<script>
// 引入子组件
import TodoListHeader from './components/TodoListHeader'
import TodoListBody from './components/TodoListBody'
import TodoListFooter from './components/TodoListFooter'

export default {
  // 注册组件
  components: {
    TodoListHeader,
    TodoListBody,
    TodoListFooter,
  },
  // 数据
  data() {
    return {
      list: JSON.parse(localStorage.getItem('list')) || [
        {id:1, value:'读书万卷', flag:false},
        {id:2, value:'行万里路', flag:false},
        {id:3, value:'书读百遍', flag:true},
      ],
      type:'all'   
    }
  },
  //事件处理
  methods: {
    // 添加功能，并接受子组件传递过来的数据
    addList(value) {
      // 合并数组的方法 
      this.list = [...this.list, {id:+new Date(), value, flag:false }]
    },
    // 修改功能(把之前的v-model改成单向数据流)
    changeFlag(id, flag) {
      this.list.forEach(item => {
        if(item.id === id) {
          item.flag = flag
        }
      })
    },
    // 主体删除功能
    delList(id) {
      const event = this.list.find(item => item.id === id)
      if(!event.flag) return  alert('未完成任务不能删除哦')
      this.list = this.list.filter(item => item.id !== id)
    },
    // 底部删除筛选功能
    delAll() {
      this.list = this.list.filter(item => !item.flag)
    },
    changeType(value) {
      this.type = value
    },
    changeAll(flag) {
      this.list.forEach(item => item.flag = flag)
    }

  },
  // 计算属性
  computed: {
    // 父传子
    sum() {
      return this.list.filter(item => !item.flag).length 
    },
    // 子传父底部清除功能
    delClearBtn() {
      return this.list.some(item => item.flag)
    },

    renderList() {
      switch(this.type) {
        case 'all':
         return this.list
        case 'active' :
         return this.list.filter(item => !item.flag)
        case 'completed' :
         return this.list.filter(item => item.flag)
        default: return this.list
      }
    }
  },
  // 监听属性
  watch: {
    list:{
      immediate: true,
      deep:true,
      handler(newVal) {
      localStorage.setItem('list', JSON.stringify(newVal))
    }
    }
  }

}
</script>

<style></style>
